<template>
	<div class="content">
		<Dropdown class="select" trigger="click" @on-click="chooseResolution">
			<Button class="chooseBtn">
				{{ $t('ivcs.resolution') }}
				<Icon type="ios-arrow-down"></Icon>
			</Button>
			<DropdownMenu slot="list">
				<DropdownItem name="1" :selected="resolution.width === 640">VGA</DropdownItem>
				<DropdownItem name="2" :selected="resolution.width === 1280">720p</DropdownItem>
				<DropdownItem name="3" :selected="resolution.width === 1920">1080p</DropdownItem>
			</DropdownMenu>
		</Dropdown>

		<Dropdown class="select" trigger="click" @on-click="chooseMaxBitrate">
			<Button class="chooseBtn">
				{{ $t('ivcs.rate') }}
				<Icon type="ios-arrow-down"></Icon>
			</Button>
			<DropdownMenu slot="list">
				<DropdownItem name="2000" :selected="maxBitrate === 2000">2M</DropdownItem>
				<DropdownItem name="1500" :selected="maxBitrate === 1500">1.5M</DropdownItem>
				<DropdownItem name="1000" :selected="maxBitrate === 1000">1M</DropdownItem>
				<DropdownItem name="768" :selected="maxBitrate === 768">768kbps</DropdownItem>
				<DropdownItem name="512" :selected="maxBitrate === 512">512kbps</DropdownItem>
				<DropdownItem name="384" :selected="maxBitrate === 384">384kbps</DropdownItem>
			</DropdownMenu>
		</Dropdown>

		<Dropdown class="select" trigger="click" @on-click="chooseMyVideocodec">
			<Button class="chooseBtn">
				{{ $t('ivcs.videocodec') }}
				<Icon type="ios-arrow-down"></Icon>
			</Button>
			<DropdownMenu slot="list">
				<DropdownItem name="vp8" :selected="videocodec === 'vp8'">vp8</DropdownItem>
				<!--<DropdownItem name="vp9">vp9</DropdownItem>-->
				<DropdownItem name="h264" :selected="videocodec === 'h264'">h264</DropdownItem>
				<!--<DropdownItem name="h265">h265</DropdownItem>-->
			</DropdownMenu>
		</Dropdown>

		<Button type="info" class="btn2" @click="close">{{ $t('ivcs.Yes') }}</Button>
	</div>
</template>

<script>
import ivcs from '../ivcs-sdk';
export default {
	name: 'Settings',
	data() {
		return {
			resolution: {
				width: 640,
				height: 480
			},
			maxBitrate: 512,
			videocodec: 'h264',
			mediaOptions: defaultMediaOptions
		};
	},
	mounted() {
		//获取默认设置的分辨率
		if (sessionStorage.getItem('bitrate')) {
			this.maxBitrate = sessionStorage.getItem('bitrate');
		}
		if (sessionStorage.getItem('videocodec')) {
			this.videocodec = sessionStorage.getItem('videocodec');
		}
		if (sessionStorage.getItem('myresoultion')) {
			this.resolution = JSON.parse(sessionStorage.getItem('myresoultion'));
		}
	},
	methods: {
		/*关闭*/
		close() {
			this.$emit('close');
		},
		/*访客设置最大分辨率*/
		chooseResolution(value) {
			console.log(value);
			//非恒等于
			if (value == 1) {
				this.resolution = {
					width: 640,
					height: 480
				};
			} else if (value == 2) {
				this.resolution = {
					width: 1280,
					height: 720
				};
			} else if (value == 3) {
				this.resolution = {
					width: 1920,
					height: 1080
				};
			}
			console.log(this.resolution);
			sessionStorage.setItem('myresoultion', JSON.stringify(this.resolution));
			this.mediaOptions.cameraStreamVideoConstraints.resolution = this.resolution;
			ivcs.client.updateMediaOptions(
				this.mediaOptions,
				resp => {
					console.log('updateMediaOptions success', resp);
				},
				error => {
					console.log('updateMediaOptions error', error);
				}
			);
		},

		/*访客设置最大码率*/
		chooseMaxBitrate(value) {
			console.log(value);
			this.maxBitrate = parseInt(value);
			sessionStorage.setItem('bitrate', value);
			let videos = this.mediaOptions.cameraPublishOptions.video;
			videos.forEach(video => {
				video.maxBitrate = parseInt(value);
			});
			this.mediaOptions.cameraPublishOptions.video = videos;
			ivcs.client.updateMediaOptions(
				this.mediaOptions,
				resp => {
					console.log('updateMediaOptions success', resp);
				},
				error => {
					console.log('updateMediaOptions error', error);
				}
			);
		},

		/*设置videocodec,设置第一优先级的codec*/
		chooseMyVideocodec(value) {
			sessionStorage.setItem('videocodec', value);
			this.videocodec = value;
			let videos = this.mediaOptions.cameraPublishOptions.video;
			if (videos[0].codec.name != value) {
				[videos[0], videos[1]] = [videos[1], videos[0]];
			}
			this.mediaOptions.cameraPublishOptions.video = videos;
			ivcs.client.updateMediaOptions(
				this.mediaOptions,
				resp => {
					console.log('updateMediaOptions success', resp);
				},
				error => {
					console.log('updateMediaOptions error', error);
				}
			);
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;

	width: 200px;
	height: 320px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.btn {
	width: 90%;
	height: 30px;
	line-height: 20px;
	background: rgba(100, 202, 171, 1);
	/*background:rgba(102,172,244,1);*/
	color: rgba(255, 255, 255, 1);
	margin-top: 10px;
	margin-left: 5%;
}

.select {
	width: 90%;
	height: 30px;
	margin-top: 10px;
	/*margin-left: 5%;*/
}

.chooseBtn {
	width: 100%;
	height: 30px;
	line-height: 20px;
	background: rgba(100, 202, 171, 1);
	/*background:rgba(102,172,244,1);*/
	color: rgba(255, 255, 255, 1);
	/*margin-top: 10px;*/
	margin-left: 2%;
}

.btn2 {
	width: 90%;
	height: 30px;
	line-height: 20px;
	margin-left: 5%;
	color: rgba(255, 255, 255, 1);
	margin-top: 70px;
	background-color: rgba(100, 202, 171, 1);
}
</style>
